import styles from "./index.module.scss"
import { Col, Image } from "antd"
import { useSelector } from 'react-redux'
import { EyeOutlined, CommentOutlined } from "@ant-design/icons"
import { useNavigate } from "react-router-dom"
import { getdiscuss } from "@/apis/discuss"
import { useEffect, useState } from "react"
const base_url = import.meta.env.VITE_APP_URL
type Item = {
    Cover_img: string,
    review: number,
    texttual: string
    title: string
    _id: string
}
const Category_Foods = ({ keyIndex, item }: { keyIndex: number, item: Item }) => {
    const thems = useSelector((state: any) => state.Appstore.theme)
    const [discusslength, setdiscusslength] = useState(0)
    const navigate = useNavigate()
    const toDetail = (id: String) => {
        // detaile
        navigate(`/detaile/${id}`)
    }
    useEffect(() => {
        getdiscuss(item._id).then((res) => {
            setdiscusslength(res.data.length)
        })
    })
    return (
        <>



            {
                keyIndex % 2 == 0 ? <Col xs={22} sm={22} md={10} lg={7} style={{ margin: "5px", background: thems ? 'rgba(255,255,255,0.9)' : 'rgba(0,0,0,0.5)' }}>
                    <div className={styles.item}>
                        <Image
                            preview={{
                                mask:
                                    <div>点击预览</div>
                            }}
                            width={"50%"}
                            height={'150px'}
                            src={base_url + item.Cover_img} />
                        <div onClick={() => toDetail(item._id)} className={styles.item_item}>
                            <p>{item.title}</p>
                            <p style={{ margin: "5px" }}>{item.texttual}</p>
                            <div style={{ display: "flex", justifyContent: "space-around", width: "100%" }}>
                                <div > <EyeOutlined />
                                    {item.review}</div>
                                <div> <CommentOutlined />
                                    {discusslength}</div>
                            </div>
                        </div>
                    </div>
                </Col> :

                    <Col xs={22} sm={22} md={10} lg={7} style={{ margin: "5px", background: thems ? 'rgba(255,255,255,0.9)' : 'rgba(0,0,0,0.5)' }}>
                        <div className={styles.item}>
                            <div onClick={() => toDetail(item._id)} className={styles.item_item}>
                                <p>{item.title}</p>
                                <p style={{ margin: "5px" }}>{item.texttual}</p>
                                <div style={{ display: "flex", justifyContent: "space-around", width: "100%" }}>
                                    <div > <EyeOutlined />
                                        {item.review}</div>
                                    <div> <CommentOutlined />
                                        {discusslength}</div>
                                </div>
                            </div>

                            <Image
                                preview={{
                                    mask:
                                        <div>点击预览</div>
                                }}
                                width={"50%"}
                                height={'150px'}
                                src={base_url + item.Cover_img} />
                        </div>
                    </Col>
            }
        </>
    )
}

export default Category_Foods